<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer',{
        shouldAnimate : true,
        animation: true,
        timeline: true
    });

    var dates = [
        '2018-07-19T15:18:00Z',
        '2018-07-19T15:18:00.5Z',
        '2018-07-19T15:18:01Z',
        '2018-07-19T15:18:01.5Z',
        '2018-07-19T15:18:02Z',
        '2018-07-19T15:18:02.5Z'
    ];

    var uris = [
        '../data/Cesium3DTiles/PointCloud/PointCloudTimeDynamic/0.pnts',
        '../data/Cesium3DTiles/PointCloud/PointCloudTimeDynamic/1.pnts',
        '../data/Cesium3DTiles/PointCloud/PointCloudTimeDynamic/2.pnts',
        '../data/Cesium3DTiles/PointCloud/PointCloudTimeDynamic/3.pnts',
        '../data/Cesium3DTiles/PointCloud/PointCloudTimeDynamic/4.pnts'
    ];

    function dataCallback(interval, index) {
        return {
            uri: uris[index]
        };
    }

    var timeIntervalCollection = Cesium.TimeIntervalCollection.fromIso8601DateArray({
        iso8601Dates: dates,
        dataCallback: dataCallback
    });

    var pointCloud = new Cesium.TimeDynamicPointCloud({
        intervals : timeIntervalCollection,
        clock : viewer.clock,
        style : new Cesium.Cesium3DTileStyle({
            pointSize : 5
        })
    });
    viewer.scene.primitives.add(pointCloud);

    var start = Cesium.JulianDate.fromIso8601(dates[0]);
    var stop = Cesium.JulianDate.fromIso8601(dates[dates.length - 1]);

    viewer.timeline.zoomTo(start, stop);

    var clock = viewer.clock;
    clock.startTime = start;
    clock.currentTime = start;
    clock.stopTime = stop;
    clock.clockRange = Cesium.ClockRange.LOOP_STOP;

    viewer.zoomTo(pointCloud, new Cesium.HeadingPitchRange(0.0, -0.5, 50.0));

</script>
</body>

</html>